<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Babylon.js加载全景图</title>
		<style>
			html,
			body {
				overflow: hidden;
				width: 100%;
				height: 100%;
				margin: 0;
			}
		
			canvas {
				width: 100%;
				height: 100%;
				-ms-touch-action: none;
				touch-action: none;
			}
		</style>
	</head>
	<body>
		<canvas id="renderCanvas"></canvas>
		<script src="babylon/js/babylon.js"></script>
		<script src="babylon/js/babylonjs.loaders.min.js"></script>
		<script>
			window.addEventListener('DOMContentLoaded', function() {
				//获取渲染容器对象
				var canvas = document.getElementById('renderCanvas');
				//加载渲染引擎 Engine 类负责低级别的 API 接口。第一个参数为渲染容器对象，第二个参数是开启抗锯齿
				var engine = new BABYLON.Engine(canvas, true);
				// 基本的场景对象
				var scene = new BABYLON.Scene(engine);
				// 弧度旋转相机，参数含义为：α角度、β角度、半径、目标方向、场景对象。
				var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2,  Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
				// 把相机附在渲染对象上
				camera.attachControl(canvas, false);
				// 限制相机最小缩放比例
				camera.lowerRadiusLimit = 1;
				// 限制相机最大缩放比例
				camera.upperRadiusLimit = 1;
				// 缩放相机
				camera.radius = 1;
				// 相机自动旋转
				camera.useAutoRotationBehavior = true;
				camera.autoRotationBehavior.idleRotationSpeed = 0.2; //自动旋转速度
				camera.autoRotationBehavior.idleRotationWaitTime = 500; //用户交互后多少时间开启自动旋转（毫秒）
				camera.autoRotationBehavior.idleRotationSpinupTime = 1000; //从开始自动旋转到设置的旋转速度所需要的时间（毫秒）
				camera.autoRotationBehavior.zoomStopsAnimation = true; //设置缩放是否会停止自动旋转

				// 加载全景图
				var dome = new BABYLON.PhotoDome('testdome', "/image/360photo.jpg", {resolution: 32,size: 100},scene);
				//注册渲染循环 这些代码非常重要，场景是需要循环渲染的
				engine.runRenderLoop(function() {
					scene.render();
				});
				//实现容器自动缩放
				window.addEventListener('resize', function() {
					engine.resize();
				});
			});
		</script>
	</body>
</html>